<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Brand List</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<div class="container">
<h1>the db10 page</h1>
<form>
    <input type="text" name="name"/>
    <input type="button" name="search" onclick="doQueryDb10()"  value="搜索"/>
    <input type="button" name="add" onclick="doAddUI()" value="新增"/>
</form>
<table class="table">
    <!--thead用于定义table中的列标题部分-->
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>gender</th>
        <th>birthday</th>
        <th>dept</th>
        <th>job</th>
        <th>sal</th>
        <th>bonus</th>
    </tr>
    </thead>
    <!--tbody用于定义table中的表体部分-->
    <tbody>
    <tr th:each="db10:${list}">
        <td th:text="${db10.id}"></td>
        <td th:text="${db10.name}"></td>
        <td th:text="${db10.gender}"></td>
        <td th:text="${#dates.format(db10.birthday,'yyyy/MM/dd')}"></td>
        <td th:text="${db10.dept}"></td>
        <td th:text="${db10.job}"></td>
        <td th:text="${db10.sal}"></td>
        <td th:text="${db10.bonus}"></td>
        <td>
            <button type="button" th:onclick="doDeleteById('[[${db10.id}]]')">删除</button>
            <button type="button" th:onclick="doFindById('[[${db10.id}]]')">修改</button>
        </td>
    </tr>
    </tbody>
</table>
</div>
<script>
    function doQueryDb10() {
        let name = document.forms[0].name.value;
        console.log(name)
        location.href=`/doFindDb10/${name}`;
    }
    function doAddUI() {
        location.href=`/doAddUI`;
    }
    function doFindById(id) {
        location.href=`/doFindById/${id}`;
    }
    function doDeleteById(id) {
        location.href=`/doDeleteById/${id}`;
    }

</script>
</body>
</html>